<template>
	<view>
		<!-- 轮播图 -->
		<swiper class="swiper" circular autoplay interval="3000" duration="1000">
			<block v-for="(item,index) in bannerlist" :key="index">
				<swiper-item>
					<image class="swiper-item" lazy-load :src="item.img"></image>
				</swiper-item>
			</block>
		</swiper>
		
		<!-- 分类 -->
		<scroll-view class="classify" scroll-x="true">
			<block v-for="(item,index) in classify" :key="index">
				<view class="classify_box" :class="index==classifyIndex?'classify_active':''" @click="selectClassify(index)">
					{{item}}
					<view class="classify_active_border" v-if="index==classifyIndex"></view>
				</view>
			</block>
		</scroll-view>
		
		<!-- 图片 -->
		<view class="img" v-if="classifyIndex==0">
			<block v-for="(item,index) in imgzurl" :key="index">
				<view class="imgbox">
					<view class="time" style="margin-bottom:10rpx">{{item[0].ctime}}</view>
					<view class="imgboxes">
						<block v-for="(item,index) in item" :key="index">
							<!-- <view class="imgboxes_l">{{item.ctime}}</view> -->
							<image :src="item.imgurl" mode="widthFix" class="imgboxes_l" @click="imageDetail(item.imgurl)" v-if="item.l==true"></image>
							<image :src="item.imgurl" mode="widthFix" class="imgboxes_r" @click="imageDetail(item.imgurl)" v-else></image>
						</block>
					</view>
				</view>
			</block>
				
		</view>
		
		<!-- 视频 -->
		<view class="video" v-if="classifyIndex==1">
			<block v-for="(item,index) in list" :key="index">
				<view class="time" v-if="showMonth(item.ctime,index)">{{item.ctime}}</view>
				<view class="video_box">
					<video :id="`video${item.videourl}`" @play='videoPlay(item.videourl)' @fullscreenchange="fullscreenchange" :src="item.videourl" object-fit="fill" class="video_box_video"></video>
					<view class="video_boxes">
						<view class="video_boxes_text">{{item.title}}</view>
						<view class="videoBox" @click="videoDetail(item.videourl)">
							<image src="/static/downloadVideo.png" class="videoBox_img"></image>
							<view class="videoBox_text">下载</view>
						</view>
					</view>
				</view>
			</block>
		</view>
		
		<!-- 文案 -->
		<view class="text" v-if="classifyIndex==2">
			<view class="text_searchbox">
				<view class="text_search">
					<image src="/static/search.png" class="text_search_img"></image>
					<input type="text" class="text_search_input" placeholder="请输入内容" @input="inputText" />
					<view class="text_search_text" @click="search">查找</view>
				</view>
			</view>
			
			<block v-for="(item,index) in list" :key="index">
				<view class="time" v-if="showMonth(item.ctime,index)">{{item.ctime}}</view>
				<view class="textbox">
					<text class="textbox_text">{{item.word}}</text>
					<view class="textbox_box" @click="copyText(item.word)">
						<image src="/static/copy.png" class="textbox_box_img"></image>
						<view class="textbox_box_copy">复制</view>
					</view>
				</view>
			</block>
		</view>
		
		
		<!-- 占位图 -->
		<image src="/static/nothing.jpg" mode="widthFix" style="width: 750rpx;" v-if="!list.length"></image>
	</view>
</template>

<script>
	var page = 1
	var lastPage = false
	import { requestData } from 'util/request';
	export default {
		data() {
			return {
				list: [],
				bannerlist: [],
				classify: ['图片','视频','文案'],
				classifyIndex: 0,
				subjectcList: [], //专题数据
				tabList: [],
				tabIndex: null,
				searchstr: '', //输入框输入文字
				imgtime: '',
				imgnum: 0,
				imgzurl: [],
				imgurl: [],
				zoneid: '',
				playId: 0,
				videoContext: '',
			};
		},
		
		// 下拉刷新
		onPullDownRefresh() {
			let that = this
			
			
			
			setTimeout(function () {
				that.list = []
				that.imgzurl = []
				that.imgurl = []
				page = 1
				lastPage = false
				that.request()
				uni.stopPullDownRefresh();
			}, 1000);
		},
		
		onReachBottom(){
			let that = this
			
			if(!lastPage){
				that.request()
			}
		},
		
		onLoad(options) {
			let that = this
			
			that.zoneid = options.zoneid
			
			uni.request({
				url: getApp().globalData.url + '/fp/bannerlist',
				method: 'POST',
				success(res) {
					that.bannerlist = res.data.data
				}
			})
			
			that.request()
		},
		
		methods: {
			// 月份
			showMonth(time,index){
				let that = this
				
				if(index==0){
					return true
				}else if(time == that.list[index-1].ctime){
					return false
				}else{
					return true
				}
			},
			
			// 点击classify
			selectClassify(index){
				let that = this
				
				if(index==that.classifyIndex){
					return false
				}
				that.classifyIndex = index
				if(index==3){
					that.subjectRequest()
				}else{
					that.list = []
					that.imgurl = []
					that.imgzurl = []
					page = 1
					lastPage = false
					that.request()
				}
			},
			
			// 图片计算
			// imgCount(){
			// 	let that = this
			// 	let imglist = that.list
				
			// 	let url = []
			// 	let zurl = []
			// 	// 使用map函数遍历数组，并返回一个新数组，其中包含图片的高度
			// 	const imageHeights = imglist.map(item => {
			// 		uni.getImageInfo({
			// 			src: item.imgurl,
			// 			success(res){
			// 				item.height = 750/res.width*res.height
			// 				item.l = false
			// 				item.r = false
			// 				that.imgheight(item)
			// 			}
			// 		})
			// 	});
			// },
			
			// imgheight(item){
			// 	let that = this
			// 	let itemurl = item
			// 	that.imgurl.push(itemurl)
			// 	let imgtime = that.list[0].ctime
			// 	if(item.imgurl==that.list[that.list.length-1].imgurl){
			// 		let url = []
			// 		let zurl = []
			// 		let l = 0
			// 		let r = 0
			// 		let b = false
			// 		for(var i =0;i<that.imgurl.length;i++){
			// 			let imageurl = that.imgurl[i]
			// 			if(imgtime==that.imgurl[i].ctime){
							
			// 				if(l<=r){
			// 					imageurl.l = true
			// 					l = imageurl.height +l
			// 				}else{
			// 					r = imageurl.height + r
			// 					imageurl.r = true
			// 				}
							
			// 				url.push(imageurl)
							
			// 			}else{
			// 				b = true
			// 				imgtime = that.imgurl[i].ctime
			// 				l = 0
			// 				r = 0
			// 				if(l<=r){
			// 					imageurl.l = true
			// 					l = imageurl.height +l
			// 				}else{
			// 					r = imageurl.height + r
			// 					imageurl.r = true
			// 				}
			// 				zurl.push(url)
			// 				url = []
			// 				url.push(imageurl)
			// 			}
			// 		}
			// 		if(b == false){
			// 			zurl.push(url)
			// 		}
			// 		that.imgzurl = zurl
			// 	}
			// },
			
			// 图片计算
			imgCount(list){
				let that = this
				
				
				
				// 使用map函数遍历数组，并返回一个新数组，其中包含图片的高度
				const imageHeights =list.map((item) => {
					
					return new Promise((resolve, reject) => {
					    uni.getImageInfo({
					    	src: item.imgurl,
					    	success(res){
					    		item.height = 750/res.width*res.height
					    		item.l = false
					    		item.r = false
								resolve(item)
					    	}
					    })
					  });
					
					
				})
				
				// 使用Promise.all获取所有图片高度的结果
				Promise.all(imageHeights).then(item => {
				  that.imgheight(item,list)
				}).catch(error => {
				  console.error(error); // 输出错误信息
				});
				
				
			},
			
			imgheight(item){
				let that = this
				that.imgurl = item
				let imgtime = that.imgtime
					let url = []
					let zurl = []
					let l = 0
					let r = 0
					let b = false
					if(!that.imgzurl.length){
						for(var i =0;i<that.imgurl.length;i++){
							let imageurl = that.imgurl[i]
							if(imgtime==that.imgurl[i].ctime){
								b = false
								if(l<=r){
									imageurl.l = true
									l = imageurl.height +l +4
								}else{
									r = imageurl.height + r +4
									imageurl.r = true
								}
								that.l = l
								that.r = r
								url.push(imageurl)
								
							}else{
								b = true
								imgtime = that.imgurl[i].ctime
								l = 0
								r = 0
								if(l<=r){
									imageurl.l = true
									l = imageurl.height + l +4
								}else{
									r = imageurl.height + r +4
									imageurl.r = true
								}
								that.l = l
								that.r = r
								zurl.push(url)
								url = []
								url.push(imageurl)
							}
						}
						zurl.push(url)
						that.imgzurl = zurl
					}else if(that.imgzurl.length){
						let w = that.l
						let h = that.r
						let d = false
						for(var i =0;i<that.imgurl.length;i++){
							let imgurl = that.imgurl[i]
							if(that.imgtime == that.imgurl[i].ctime){
								d = false
								if(w<=h){
									imgurl.l = true
									w = imgurl.height + w +4
								}else{
									h = imgurl.height + h +4
									imgurl.r = true
								}
								that.l = w
								that.r = h
								url.push(imgurl)
								that.imgtime = that.imgurl[i].ctime
							}else{
								d = true
								w = 0
								h = 0
								that.l = 0
								that.r = 0
								if(w<=h){
									imgurl.l = true
									w = imgurl.height + w +4
								}else{
									h = imgurl.height + h +4
									imgurl.r = true
								}
								that.l = w
								that.r = h
								that.imgtime = that.imgurl[i].ctime
								
								zurl.push(url)
								url = []
								url.push(imgurl)
							}
						}
						zurl.push(url)
						let imgzurl = that.imgzurl
						for(var i=0;i<zurl.length;i++){
							if(imgzurl[that.imgzurl.length-1][0].ctime == zurl[i][0].ctime){
								imgzurl[that.imgzurl.length-1].push(...zurl[i])
							}else{
								imgzurl.push(zurl[i])
							}
						}
						
						
						that.imgzurl = imgzurl
					}
				// }
			},
			
			// 图片详情
			imageDetail(imgurl){
				let that = this
				uni.navigateTo({
					url: '/pages/index/imageDetail?imgurl='+imgurl + '&zoneid=' + that.zoneid
				})
			},
			
			// // 视频播放
			// videoPlay(id) {
			// 	let that = this
			//     if (that.playId !== 0 && that.playId != id) {
			//         let videoContext = uni.createVideoContext(`video${that.playId}`)
			//         videoContext.pause()
			//     }
			//     that.playId = id
			// },
			
			// 视频播放
			videoPlay(id) {
				let that = this
				
				that.videoContext = uni.createVideoContext(`video${id}`)
				that.videoContext.requestFullScreen()
			 //    if (that.playId !== 0 && that.playId != id) {
			 //        let videoContext = uni.createVideoContext(`video${that.playId}`)
				// 	videoContext.pause()
			 //    }
				// that.playId = id
			},
			
			// 进入/退出全屏
			fullscreenchange(e){
				let that = this
				
				if(!e.detail.fullScreen){
					that.videoContext.pause()
				}
			},
			
			// 视频下载
			videoDetail(videoUrl){
				let that = this
				
				uni.showLoading({title:'保存中……'})
				uni.downloadFile({
				  url: videoUrl, // 此为视频下载地址
				  success: (res) => {
					if (res.statusCode === 200) {
					  uni.compressVideo({ // 压缩下载返回的地址
						src: res.tempFilePath, // 下载成功的临时路径
						quality:'high',
						success: (res1) => {
						  uni.saveVideoToPhotosAlbum({
							filePath: res1.tempFilePath, // 压缩后的路径
							success: (errMsg)=>{
							  console.log('成功', errMsg)
							  uni.hideLoading()
							  uni.showToast({
								mask: true,
								title: '保存成功'
							  });
							},
							fail(err) {
								uni.hideLoading()
								if(err.errMsg == 'saveVideoToPhotosAlbum:fail auth deny'){
									uni.showModal({
										title: '提示',
										content: '需要您授权保存相册',
										showCancel: false,
										success(res) {
											if (res.confirm) {
												uni.openSetting({
													success(settingdata) {
														if (settingdata.authSetting['scope.writePhotosAlbum']) {
															uni.showModal({
																title: '提示',
																content: '获取权限成功,再次保存图片即可成功',
																showCancel: false,
															})
														} else {
															uni.showModal({
																title: '提示',
																content: '获取权限失败，无法保存到相册',
																showCancel: false
															})
														}
													}
												})
											}
										}
									})
								}
							}
						  });
						}
					  })
					}
				  }
				})
				
			},
			
			// 文本框搜索
			inputText(e){
				let that = this
				
				that.searchstr = e.detail.value
			},
			
			// 点击搜索
			search(){
				let that = this
				
				that.list = []
				page = 1
				lastPage = false
				that.request()
			},
			
			// 复制文本
			copyText(text){
				uni.setClipboardData({
					data: text,
					toast:'aas',
					success: function () {
						toast: 'aa'
						console.log('success');
					}
				});
			},
			
			// 请求接口
			request(){
				let that = this
				
				console.log(page)
				let list = []
				let prama = {
					stime: '',
					etime: '',
					pagecurrent: page,
					pagesize: 10,
					ptype: that.classifyIndex,
					zoneid: that.zoneid,
					ctypeid: that.tabIndex? that.tabList[that.tabIndex].ctypeid: '',
					searchstr: that.classifyIndex == 2 ? that.searchstr : '',
				}
				requestData('/fp/photolist',prama).then(res=>{
					if(res.code==20000){
						list = res.data.list
						for(var i=0;i<list.length;i++){
							list[i].ctime = list[i].ctime.substring(0,8)
						}
						
						if(that.list.length){
							that.list = that.list.concat(list)
						}else{
							that.list = list
						}
						if(that.classifyIndex==0){
							that.imgtime = list[0].ctime
							that.imgCount(list)
						}
						
						if(res.data.lastPage){
							lastPage = true
						}else{
							page++
						}
					}
				})
				
				// uni.request({
				// 	url: getApp().globalData.url + '/fp/photolist',
				// 	method: 'POST',
				// 	header: {
				// 		'content-type': 'application/x-www-form-urlencoded',
				// 		token: uni.getStorageSync('token')
				// 	},
				// 	data: {
				// 		stime: '',
				// 		etime: '',
				// 		pagecurrent: page,
				// 		pagesize: 10,
				// 		ptype: that.classifyIndex,
				// 		zoneid: that.zoneid,
				// 		ctypeid: that.tabIndex? that.tabList[that.tabIndex].ctypeid: '',
				// 		searchstr: that.classifyIndex == 2 ? that.searchstr : '',
				// 	},
				// 	success(res) {
				// 		if(res.data.code==20000){
				// 			list = res.data.data.list
				// 			for(var i=0;i<list.length;i++){
				// 				list[i].ctime = list[i].ctime.substring(0,8)
				// 			}
							
				// 			if(that.list.length){
				// 				that.list = that.list.concat(list)
				// 			}else{
				// 				that.list = list
				// 			}
				// 			if(that.classifyIndex==0){
				// 				that.imgtime = list[0].ctime
				// 				that.imgCount(list)
				// 			}
							
				// 			if(res.data.data.lastPage){
				// 				lastPage = true
				// 			}else{
				// 				page++
				// 			}
				// 		}
				// 	}
				// })
			},
		}
	}
</script>

<style lang="scss">
	page{
		background: #ECECEC;
	}
	.swiper{
		width: 750rpx;
		height: 527rpx;
		overflow: hidden;
	}
	.swiper-item{
		width: 750rpx;
		height: 527rpx;
	}
	
	// 分类
	.classify{
		width: 750rpx;
		height: 126rpx;
		white-space: nowrap;
		// background: #FFFFFF;
		background: #BE2B3E;
		
		&_box{
			// float: left;
			display: inline-block;
			padding: 44rpx 34rpx 0;
			height: 40rpx;
			font-family: Alibaba PuHuiTi;
			font-weight: 400;
			font-size: 44rpx;
			// color: #000000;
			color: #FFFFFF;
			line-height: 40rpx;
		}
		&_active{
			position: relative;
			font-weight: bold;
			font-size: 44rpx;
			// color: #03AEA5;
			color: #FAD886;
			
			&_border{
				position: absolute;
				bottom: -18rpx;
				left: 50%;
				transform: translate(-50%);
				width: 60rpx;
				height: 5rpx;
				// background: #03AEA5;
				background: #FAD886;
			}
		}
	}
	
	// .time{
	// 	margin: 30rpx 0;
	// 	height: 31rpx;
	// 	font-family: Alibaba PuHuiTi;
	// 	font-weight: 400;
	// 	font-size: 32rpx;
	// 	color: #999999;
	// 	line-height: 31rpx;
	// 	text-align: center;
	// 	overflow: hidden;
	// }
	.time{
		position: relative;
		margin: 30rpx 0;
		background: #009C8F;
		height: 100rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 100rpx;
		text-align: center;
		overflow: hidden;
		
		&_l{
			position: absolute;
			top: 50%;
			left: 150rpx;
			transform: translate(0,-50%);
			width: 100rpx;
			height: 1rpx;
			background: #FFFFFF;
		}
		&_r{
			position: absolute;
			top: 50%;
			right: 150rpx;
			transform: translate(0,-50%);
			width: 100rpx;
			height: 1rpx;
			background: #FFFFFF;
		}
			
	}
	
	// 图片
	.img{
		width: 750rpx;
		overflow: hidden;
		
		.imgbox{
			width: 750rpx;
			overflow: hidden;
			
			.imgboxes{
				width: 750rpx;
				overflow: hidden;
				
				&_l{
					margin-right: 4rpx;
					margin-bottom: 4rpx;
					float: left;
					// display: block;
					  // width: 100%;
					width: 373rpx;
				}
				&_r{
					float: right;
					margin-bottom: 4rpx;
					width: 373rpx;
				}
			}
			
			
		}
	}
	
	// 视频
	.video{
		// margin: 0rpx 30rpx;
		overflow: hidden;
		
		&_box{
			margin: 0rpx 30rpx 20rpx;
			// margin-bottom: 20rpx;
			width: 690rpx;
			height: 516rpx;
			background: #FFFFFF;
			background: #BE2B3E;
			border-radius: 15rpx;
			overflow: hidden;
			
			&_video{
				width: 690rpx;
				height: 388rpx;
				overflow: hidden;
			}
			.video_boxes{
				margin: 22rpx 30rpx 30rpx;
				height: 68rpx;
				
				overflow: hidden;
				
				&_text{
					float: left;
					width: 431rpx;
					height: 68rpx;
					font-family: Alibaba PuHuiTi;
					font-weight: 400;
					font-size: 40rpx;
					// color: #000000;
					color: #FAD886;
					line-height: 68rpx;
					display: -webkit-box;
					overflow: hidden;
					text-overflow: ellipsis;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
				}
				.videoBox{
					float: left;
					margin-left: 35rpx;
					width: 164rpx;
					height: 68rpx;
					background: #03AEA5;
					border-radius: 10rpx;
					overflow: hidden;
					
					&_img{
						float: left;
						margin: 18rpx 10rpx 18rpx 30rpx;
						width: 32rpx;
						height: 32rpx;
					}
					&_text{
						float: left;
						height: 68rpx;
						font-family: Alibaba PuHuiTi;
						font-weight: 400;
						font-size: 32rpx;
						color: #FFFFFF;
						line-height: 68rpx;
					}
				}
			}
		}
	}
	
	// 文案
	.text{
		margin: 30rpx 0rpx;
		overflow: hidden;
		
		&_searchbox{
			margin-bottom: 30rpx;
			width: 750rpx;
			height: 140rpx;
			background: #FFFFFF;
			overflow: hidden;
			
			.text_search{
				margin: 33rpx 28rpx;
				width: 692rpx;
				height: 75rpx;
				border-radius: 30rpx;
				border: 1rpx solid #E0E0E0;
				
				&_img{
					float: left;
					margin: 19rpx 8rpx 19rpx 32rpx;
					width: 36rpx;
					height: 39rpx;
				}
				&_input{
					float: left;
					margin-left: 12rpx;;
					width: 360rpx;
					height: 75rpx;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #000000;
					line-height: 75rpx;
				}
				&_text{
					float: right;
					margin-right: 32rpx;
					height: 75rpx;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #03AEA5;
					line-height: 75rpx;
				}
			}
		}
		.textbox{
			padding: 50rpx 40rpx 41rpx 48rpx;
			margin-bottom: 10rpx;
			background: #FFFFFF;
			overflow: hidden;
			
			&_text{
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 34rpx;
				color: #000000;
				line-height: 48rpx;
			}
			&_box{
				margin-top: 32rpx;
				margin-left: 497rpx;
				width: 164rpx;
				height: 68rpx;
				background: #009C8F;
				border-radius: 10rpx;
				
				&_img{
					float: left;
					margin: 18rpx 10rpx 18rpx 32rpx;
					width: 32rpx;
					height: 32rpx;
				}
				&_copy{
					float: left;
					height: 68rpx;
					font-family: Alibaba PuHuiTi;
					font-weight: 400;
					font-size: 32rpx;
					color: #FFFFFF;
					line-height: 68rpx;
				}
			}
		}
	}
</style>
